<template>
  <div class="my-check-box" @click="$emit('change', !value)">
    <div class="my-check-box__body" :class="{ active: value }"></div>

    <div class="my-check-box__text">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyCheckbox",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  model: {
    event: "change",
    prop: "value",
  },
};
</script>

<style lang="scss" scoped>
.my-check-box {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  cursor: pointer;

  &__body {
    width: 38px;
    height: 100%;
    background: url(../assets/img/checkbox.png) no-repeat;
    background-size: 100% auto;
    background-position: 0 -488px;

    &.active {
      background-position: 0 -230px;
    }
  }

  &__text {
    font-size: inherit;
    color: inherit;
    margin-left: 20px;
  }
}
</style>
